<template>
  <div id="setting">
    <n-flex>
      <n-dropdown
          placement="bottom-start"
          trigger="hover"
          size="small"
          :options="options"
          @select="handleSelect"
      >
<!--        <img :src="userInfo.avatar" alt="" v-if="userInfo !== null">-->
        <img src="@/assets/images/system/defaultAvatar.png" alt="" v-if="userInfo !== null">
        <img src="@/assets/images/system/nologin.png" alt="" v-else>
      </n-dropdown>
      <span>{{userInfo !== null ? userInfo.name : "未登录"}}</span>
    </n-flex>
  </div>
</template>

<script>

export default {
  props: [],
  components: {},
  data() {
    return {
      showMenu: false,
      userInfo: {
        "avatar": "https://dtools.cpolar.cn/file/preview/8nWkBvTsxpx3pDH6QYhmQL",
        "name": "独白里的蓝"
      },
      options: [
        {
          label: "偏好设置",
          key: "preferences"
        },
        {
          label: "账号设置",
          key: "account_settings"
        },
        {
          type: "divider",
          key: "d1"
        },
        {
          label: "退出登录",
          key: "logout"
        }
      ]
    }
  },
  computed: {},
  methods: {
    handleSelect(key) {
      // message.info(String(key));
    }
  },
  mounted() {

  },

  beforeDestroy() {

  }
}
</script>

<style>
#setting img {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  box-shadow: 0 0 10px 0 rgb(82, 82, 82, 0.2);
  cursor: pointer;
}

#setting span {
  font-weight: 100;
  font-size: 12px;
  line-height: 25px;
  height: 25px;
  user-select: none;
}

#setting img:hover {
  box-shadow: 0 0 10px 4px rgb(82, 82, 82, 0.2);
  transform: scale(1.1);
}
</style>